// 半环形图组件
import BasePieChartComponent from "./base-pie-chart.js";

class SemiRingChart extends BasePieChartComponent {
    constructor() {
        super();
    }

    // 重写默认配置，添加半环特有属性
    getDefaultConfig() {
        const baseConfig = super.getDefaultConfig();
        return {
            ...baseConfig,
            semiRingAttrs: [
                ['semi-inner-radius_slider', '60%'],
                ['semi-outer-radius_slider', '80%'],
                ['semi-start-angle_number', 180],
                ['semi-end-angle_number', 0]
            ]
        };
    }

    // 重写观察属性
    static get observedAttributes() {
        return [
            ...super.observedAttributes,
            'semi-inner-radius_slider',
            'semi-outer-radius_slider',
            'semi-start-angle_number',
            'semi-end-angle_number'
        ];
    }

    // 重写生成系列配置，设置半环参数
    generateSeries(pieData, seriesConfig, pieConfig) {
        const baseSeries = super.generateSeries(pieData, seriesConfig, pieConfig);
        const { buildConfig } = window.attributeUtils;
        const semiConfig = buildConfig(this, this.getDefaultConfig().semiRingAttrs);

        return [{
            ...baseSeries[0],
            radius: [semiConfig.innerRadius, semiConfig.outerRadius],
            startAngle: semiConfig.startAngle,
            endAngle: semiConfig.endAngle,
            // 调整标签位置适应半环
            label: {
                ...baseSeries[0].label,
                position: 'outside',
                formatter: '{b}: {c}'
            }
        }];
    }

    // 处理半环属性变化
    handleAttributeChange(name, value, currentOptions) {
        super.handleAttributeChange(name, value, currentOptions);
        
        if (!currentOptions.series || currentOptions.series.length === 0) return;

        switch(name) {
            case 'semi-inner-radius_slider':
            case 'semi-outer-radius_slider':
                const semiConfig = window.attributeUtils.buildConfig(
                    this, 
                    this.getDefaultConfig().semiRingAttrs
                );
                currentOptions.series[0].radius = [
                    semiConfig.innerRadius, 
                    semiConfig.outerRadius
                ];
                this.chart.setOption(currentOptions);
                break;
            case 'semi-start-angle_number':
                currentOptions.series[0].startAngle = parseInt(value);
                this.chart.setOption(currentOptions);
                break;
            case 'semi-end-angle_number':
                currentOptions.series[0].endAngle = parseInt(value);
                this.chart.setOption(currentOptions);
                break;
        }
    }
}

customElements.define('semi-ring-chart', SemiRingChart);
    